<template>
    <a-drawer
        title="话术"
        :width="900"
        :open="open"
        :body-style="{paddingBottom: '80px'}"
        :footer-style="{textAlign: 'right'}"
        @close="onClose"
    >
        <div class="popup-right-box">
            <!-- 表单 -->
            <a-form ref="formRef" :model="formState" :rules="rulesForm" :label-col="labelCol" :wrapper-col="wrapperCol">
                <div v-for="(res, index) in formList" :key="index">
                    <a-form-item v-if="res.type === 'input'" ref="name" :label="res.title" :name="res.key">
                        <a-input
                            v-model:value="formState.speak"
                            :placeholder="res.placeholder"
                            :disabled="res.disabled"
                        />
                    </a-form-item>
                    <a-form-item v-if="res.type === 'select'" :label="res.title" :name="res.key">
                        <a-select v-model:value="formState.grouping" :placeholder="res.placeholder">
                            <a-select-option v-for="(it, index) in res.select" :key="index" :value="it.value">{{
                                it.label
                            }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item v-if="res.type === 'richText'" :label="res.title" :name="res.key">
                        <a-textarea v-model:value="formState.verbalTrick" />
                    </a-form-item>
                    <a-form-item v-if="res.type === 'button'" :wrapper-col="{span: 14, offset: 4}">
                        <a-button type="primary" @click="onSubmit">{{ res.leading }}</a-button>
                        <a-button style="margin-left: 10px" @click="resetForm">{{ res.auxiliary }}</a-button>
                    </a-form-item>
                    <a-form-item v-if="res.type === 'component'" :label="res.title" :name="res.key">
                        <component :is="h(res.component)" />
                    </a-form-item>
                </div>
            </a-form>
        </div>
    </a-drawer>
</template>
<script lang="ts" setup>
import {reactive, ref, toRaw, h} from "vue";
import type {UnwrapRef} from "vue";
const open = ref<boolean>(false);
const formRef = ref();
const labelCol = {span: 3};
const wrapperCol = {span: 20};
//接受传方法
const showDrawer = () => {
    open.value = true; // 更改状态
};
defineExpose({showDrawer});

/**
 * 接受传参值
 *  title: "标题",
 *  key: "要传递给后端的key & 判断是否必填",
 *  rules: [必填规则],
 *  placeholder: "提示语字",
 *  disabled: 是否禁用,
 *  val: "填写的值",
 *  select: [], // 下拉下拉框的选项
 */
interface RuleObject {
    type?: string; // 可选属性，根据需要可以删除
    required?: boolean;
    min?: number;
    max?: number;
    message: string;
    trigger: string;
}
interface FormItem {
    title?: string;
    type: "select" | "input" | "richText" | "button" | string | "component"; // 允许使用其他类型
    key?: string;
    rules?: RuleObject[];
    placeholder?: string;
    select?: Selection[];
    disabled?: boolean;
    val?: string;
    leading?: string; // 可选属性
    component?: any;
    auxiliary?: string; // 可选属性
}
interface Selection {
    value: string;
    label: string;
}
const props = defineProps<{
    formList: FormItem[];
}>();
const {formList} = props;

/**
 * 输出结果
 * key: "结果",
 */
const formState: UnwrapRef<Record<string, string | undefined>> = reactive(
    formList.reduce(
        (obj, res) => {
            if (res.key) {
                obj[res.key] = res.val;
            }
            return obj;
        },
        {} as Record<string, string | undefined>
    )
);

//处理rules表单校验是否必填，通过key的唯一性判断
const rulesForm = formList.reduce(
    (obj, res) => {
        obj[res.key] = res.rules;
        return obj; // 返回更新后的 obj
    },
    {} as Record<string, any>
);
//点击关闭弹窗
const onClose = () => {
    open.value = false;
};

//提交按钮
const onSubmit = () => {
    console.log("提交", formState);
    formRef.value
        .validate()
        .then(() => {
            console.log("成功", formState, toRaw(formState));
            open.value = false;
        })
        .catch(error => {
            console.log("失败", error);
        });
};
//重置按钮
const resetForm = () => {
    formRef.value.resetFields();
};
</script>

<style scoped lang="less">
.popup-right-box {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    .ant-form-item {
        padding: 12px 0 28px 0;
        background: #fafafa;
        border: 1px solid #f0f0f0;
    }
    .ant-form-item:last-child {
        padding: 12px 0; /* 根据需要调整样式 */
        background: inherit; /* 使背景色继承父元素 */
        border: none; /* 去掉边框 */
    }
}
</style>
